<template>
    <div id="mapContainer" class="TianDiMap"></div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import 'ol/ol.css';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import { XYZ } from 'ol/source';
import OSM from 'ol/source/OSM';
import { fromLonLat } from 'ol/proj';
import * as control from 'ol/control';
import {
    defaults as defaultInteractions,
    DragRotateAndZoom
} from 'ol/interaction';

import { defaults, FullScreen, MousePosition, ScaleLine } from 'ol/control';
import Overlay from 'ol/Overlay';

// 地图是一层一层的加载
// ol 是以面向对象的形式来设计的api
// map中的配置选项
// target 表示地图示例挂载的容器
// view 表示地图的视图
// layers 表示地图的图层 所有的地图都有一个底图，Source 就是地图的来源
const initMap = () => {
    // 使用高德
    const tileLayer = new TileLayer({
        // source: new XYZ({
        //     url: 'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
        // })

        // source: new XYZ({
        //             url: 'http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk={你的密钥}'
        //         })

        source: new XYZ({
            url: `http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}`
        })
    });
    let map = new Map({
        target: 'mapContainer',
        layers: [tileLayer],
        view: new View({
            center: fromLonLat([120.771441, 30.756433]), //地图中心点
            zoom: 15, // 缩放级别
            minZoom: 0, // 最小缩放级别
            maxZoom: 18, // 最大缩放级别
            constrainResolution: true // 因为存在非整数的缩放级别，所以设置该参数为true来让每次缩放结束后自动缩放到距离最近的一个整数级别，这个必须要设置，当缩放在非整数级别时地图会糊
        }),
        interactions: defaultInteractions().extend([new DragRotateAndZoom()]),
        controls: defaults().extend([
            new FullScreen(), // 全屏
            //new MousePosition(), // 显示鼠标当前位置的经纬度
            new ScaleLine() // 显示比例尺
        ])
    });

    // 你可以给元素添加任意的内容或属性或样式，也可以给元素绑定事件
    let el = document.createElement('div');
    let marker = new Overlay({
        element: el, // 要显示的元素
        position: fromLonLat([120.771441, 30.756433], 'EPSG:4326'), // 地图投影的位置
        offset: [-17, -17], // 元素显示的像素偏移量
        autoPan: true // 自动移动地图以完整的显示元素
    });
    // 添加到地图
    map.addOverlay(marker);
    // 从地图上删除
    map.removeOverlay(marker);

    console.log(map, 'map==');
};

onMounted(() => {
    initMap();
});
</script>

<style scoped lang="scss">
.TianDiMap {
    width: 100%;
    height: 100%;
}
</style>

